<template>
  <div class="area">
    <div>
      <el-button size="small" style="margin-bottom: 20px;"  @click="addDialogFormData.dialogVisible = true">添加区域</el-button>
    </div>
    <v-table stripe border v-bind="tableObj" row-key="id" @fetchTableData="fetchTableData" ref="vTableRef">
      <template v-slot:operate="slotProps">
        <el-button type="text" @click="editGetDetail(slotProps.row)">编辑</el-button>
        <el-popconfirm title="确定删除当前区域吗？" @confirm="delArea(slotProps.row.id)"><el-button slot="reference" type="text"
            style="margin-left:10px">删除</el-button></el-popconfirm>
      </template>
    </v-table>

    <AddAndEditAreaUI :dialogForm="addDialogFormData" @resetForm="addResetFrom" @comfirmForm="addComfirmForm" />

    <AddAndEditAreaUI :dialogForm="editDialogFormData" @resetForm="editResetFrom" @comfirmForm="editComfirmForm" />

  </div>
</template>

<script>
import { getListAPI, delAPI } from '@/apis/area'
import AddAndEditAreaUI from './comps/AddAndEditAreaUI.vue'
import AreaAdd from './comps/AreaAdd'
import AreaEdit from './comps/AreaEdit'
export default {
  name: 'CarMonthCardPage',
  components: { AddAndEditAreaUI },
  mixins: [AreaAdd, AreaEdit],
  data() {
    return {
      tableObj: {
        tableColumn: Object.freeze([
          { prop: 'areaName', label: '区域名称' },
          { prop: 'spaceNumber', label: '车位数（个）' },
          { prop: 'areaProportion', label: '面积（㎡）' },
          { prop: 'ruleName', label: '计费规则' },
          { prop: 'remark', label: '备注' },
          { prop: 'operate', label: '操作', slotName: 'operate', headSlotName: 'headOperate', fixed: "right", width: "180" },
        ]),
        tableData: [],
        pagination: {
          currentPage: 1,
          pageSize: 10,
          total: 0,
        },
        payload: {
          showSelection: false
        }
      },
      dict: [],


    }
  },
  beforeCreate() {
  },
  methods: {
    async fetchTableData() {
      const { currentPage, pageSize } = this.tableObj.pagination
      const params = {
        page: currentPage,
        pageSize: pageSize
      }
      const r = await getListAPI(params)
      const data = r.data
      this.tableObj.tableData = Object.freeze(data.rows)
      this.tableObj.pagination.total = data.total
    },

    async delArea(id) {
      try {
        await delAPI(id)
        this.$message.success('删除成功')
        this.fetchTableData()
      } catch (error) {
        this.$message.error('删除失败')
      }


    },


  },
  created() {
    this.fetchTableData()
  },
  mounted() { }
}
</script>

<style lang="scss" scoped></style>